<template>
  <div class="getFriendForWechat">
    <div class="myPicture">
      <img v-lazy="getFriendCoupon" width="100%" height="100%">
      <button type="button" class="explain" @click="useExplain">使用规则 ?</button>
      <img v-if='flag' :src="headImgIcon" alt="" class="headImg"/>
      <p v-if='flag'>{{usrName}}</p>
      <div class="title">
        <h2><span class="doubleQuotationMarks">“</span>咳咳！贡献一张绝世好券<span class="doubleQuotationMarks">”</span></h2>
        <h2>数量有限，先到先得哦！</h2>
      </div>
      <div class="QRCode-main">
        <img v-lazy="getQRcodeuanCase" alt="" class="QRCode-info">
        <div class="QRCode"></div>

        <p class="QRCode-title"><img :src="dianjiButton" class="dianjiButton">长按识别二维码收券</p>
      </div>

      <div class="card-info-nowrap" ref="nowrapScroll">
        <div class="card-info">
          <div class="coupon-num">
            <div class="coupon_detail_wrp">
              <!--电子券-->
              <coupon-denomination :item="param" type="small"></coupon-denomination>
              <!--电子券end-->
              <div class="card-info-detail">
                <strong class="card-info_title">{{param.coupon_name}}</strong>
                <!--星级评定-->
                <div class="">
                  <star :couponComScore="param.com_score" style="margin-left: 0.4rem;"></star>
                  <span class="grade">{{param.com_num}}条</span>
                </div>
                <!--星级评定end-->
                <p class="use-info-sold">
                  <span>有效期至：{{param.date_end | strDate(3)}}</span>
                </p>
              </div>
            </div>
            <!--<div class="img-card-hr"><img src="../../images/cardBg_03.png"></div>-->
            <!--<div class="use-info">有效时间：{{param.date_begin | strDate(3)}}-{{param.date_end | strDate(3)}}-->
          </div>
        </div>
      </div>
      <div class="zhanwei"></div>
    </div>
    <div v-if="showUseRule" class="websocket-shade">
      <useRule :param="param" @cancel="showUseRule =false"></useRule>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'
  import star from '../../componentes/global/star.vue';
  import useRule from './useRule.vue'
  import getData4 from '../../service/getData4'
  import 'src/assets/js/qrcode.js';
  import {
    Common
  } from 'src/utils/common.js';

  export default {
    data: () => ({
      getFriendCoupon: require("../../images/getFriendCoupon_background_02.jpg"),
      getQRcodeuanCase: require("../../images/getFriend_qrcode.png"),
      dianjiButton: require("../../images/changanshibie.png"),
      headImgIcon: "", // 头像图标
      usrName: "",
      showUseRule: false,
      param: {},
      reCode: '',
      flag: false //是否显示头像和名称
    }),
    created() {
      this.$store.commit("WAIT_LOADING", true); // 翻书动画
    },
    methods: {
      useExplain() { // 使用规则展示方法
        this.showUseRule = true;
      },
      share() {
        Common.setWechatShare({
          title: "文字不是重点，好友分享不可辜负哦！", // 分享标题
          desc: this.$route.query.hasOwnProperty('qr_code') == true ? "你的好友分享了一张优惠券给你，速速收下吧" : "你的好友" + this.usrName + "分享了一张优惠券给你，速速收下吧", // 分享描述
          link: this.$route.query.hasOwnProperty('qr_code') == true ? '/getFriendCoupon?mchtId=' + this.$route.query.mchtId + '&couponId=' + this.$route.query.couponId + '&qr_code=' + this.$route.query.qr_code : '/getFriendCoupon?mchtId=' + this.$route.query.mchtId + '&usrId=' + this.$route.query.usrId + '&couponId=' + this.$route.query.couponId + '&cpCode=' + this.$route.query.cpCode, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: process.env.DOMAIN_NAME + "/img/shareCouponForFriend.jpg"
        })
      }
    },
    components: {
      star,
      useRule
    },
    mounted() {
      this.$nextTick(async () => {
        let divCode = document.getElementsByClassName("QRCode")[0]
        let qrcode = new QRCode(divCode, {
          width: divCode.offsetWidth, // 获取宽高，设置二维码宽高
          height: divCode.offsetHeight
        });
        //判断是否显示头像和名称  生成二维码
        if (this.$route.query.hasOwnProperty('qr_code') == true) {
          this.flag = false;
          let reCode = await getData4.couponDetail({
            data: {
              couponId: this.$route.query.couponId,
              mchtId: this.$route.query.mchtId
            }
          });
          reCode.content.coupon_inf = JSON.parse(reCode.content.coupon_inf)
          this.reCode = reCode;
          if (this.reCode.respCode !== "00") {
            Toast({
              message: this.reCode.errorInfo,
              duration: 1000
            });
            return
          }
          qrcode.makeCode(this.$route.query.qr_code);
        } else {
          this.flag = true;
          this.reCode = await getData4.rpCodeToFriend({
            data: {
              couponId: this.$route.query.couponId,
              mchtId: this.$route.query.mchtId,
              usrId: this.$route.query.usrId,
              cpCode: this.$route.query.cpCode,
              promAppro: "general",
              shareType: "friend"
            }
          });
          this.reCode.content.usr_inf = JSON.parse(this.reCode.content.usr_inf)
          this.reCode.content.coupon_inf = JSON.parse(this.reCode.content.coupon_inf)
          if (this.reCode.respCode !== "00") {
            Toast({
              message: this.reCode.errorInfo,
              duration: 1000
            });
            return
          }
          this.headImgIcon = this.reCode.content.usr_inf.head_img; // 加载头像
          this.usrName = this.reCode.content.usr_inf.nike_name; // 加载名字
          qrcode.makeCode(this.reCode.content.qr_url);
        }
        //分享
        wx.ready(res => {
          this.share()
        })
        let scpoeList = await getData4.getScpoeString({
          mchtId: this.$route.query.mchtId,
          scpoe: this.reCode.content.coupon_inf.scope
        });
        this.reCode.content.coupon_inf.scpoeList = scpoeList; // 赋值优惠券可用或不可用商品类型信息
        this.param = this.reCode.content.coupon_inf; // 赋值显示
        document.getElementsByClassName("couponDiv2")[0].style.padding = 5 + "px";
      })
    },
    beforeRouteLeave(to, from, next) {
      if (window.isBack) {
        window.isBack = false;
        window.wx.closeWindow();
      }
      next()
    }
  }
</script>

<style lang="scss" scoped>
  //遮罩
  .websocket-shade {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    z-index: 998;
    background-color: rgba(0, 0, 0, .7);
  }

  div.getFriendForWechat {
    height: 102%;
    background-image: url("../../images/getFriendCoupon_background.jpg");
    background-size: 10%;
    .myPicture {
      position: absolute;
      top: 50%;
      transform: translate(0%, -50%);
      -webkit-transform: translate(0%, -50%);
    }
    > img.backgroundPicture {
      height: auto;
    }
    img.headImg {
      position: absolute;
      top: 5rem;
      left: 50%;
      transform: translate(-50%, 0%);
      -webkit-transform: translate(-50%, 0%);
      background-color: #fefefe;
      width: 4.5rem;
      height: 4.5rem;
      border: 0;
      border-radius: 50%;
      & + p {
        position: absolute;
        width: 100%;
        top: 10rem;
        text-align: center;
      }
    }
    .title {
      width: 100%;
      position: absolute;
      top: 11rem;
      text-align: center;
      .doubleQuotationMarks {
        font-size: 24px;
        color: #d4d4d4;
      }
    }
    button.explain {
      position: absolute;
      top: 3.2rem;
      right: 2rem;
      background-color: #fefefe;
      border: 2px solid #000;
      padding: 6px;
      border-radius: 0.75rem;
      font-weight: 800;
    }
    div.QRCode-main {
      .QRCode-info {
        position: absolute;
        top: 17rem;
        left: 50%;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        width: 11rem;
        height: 11rem;
      }
      .QRCode {
        position: absolute;
        top: 19rem;
        left: 50%;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        width: 7rem;
        height: 7rem;
      }

      .QRCode-title {
        position: absolute;
        top: 29rem;
        left: 50%;
        margin-left: 5px;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        text-align: center;
        font-size: 0.8rem;
        .dianjiButton {
          position: absolute;
          top: 0;
          left: -15%;
          width: 1rem;
          height: 1rem;
        }
      }
    }
  }

  div.card-info-nowrap {
    width: 80%;
    position: absolute;
    bottom: 5.5rem;
    left: 50%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    border-radius: 0.3rem;
    margin-left: 10px;
    div.zhanwei {
      background-color: #f55581;
      padding-right: 0.1px;
    }
    div.card-info {
      text-align: center;
      div.x-box {
        position: absolute;
        z-index: -1;
        width: 16rem;
        height: 8rem;
        margin-left: -0.8rem;
        border-radius: 0.3rem;
        background-color: #fcaec3;
      }
      div.term {
        height: 1rem;
        > p {
          font-size: 0.8rem;
          color: #666;
          padding: 0 0.6rem;
          &:nth-of-type(2) {
            font-size: 0.8rem;
          }
        }
      }
      .coupon-num {
        margin-top: 0.4375rem;
        .img-card-hr {
          white-space: normal;
          width: 100%;
          img {
            width: 100%;
          }
        }
        .use-info-sold {
          &:before {
            display: block;
            content: '';
            clear: both;
          }
          text-align: left;
          font-size: 0.8rem;
          span {
            margin-left: 0.4rem;
            color: #8c8c8c;
          }
        }
        .use-info {
          font-size: 0.8rem;
          padding: 0 0.6rem;
          text-align: left;
        }
      }
      .card-info-detail {
        float: left;
        margin-top: 5px;
        margin-left: 0.5rem;
        .card-info_title {
          float: left;
          font-size: 1rem;
          margin-left: 0.5rem;
          white-space: nowrap;
          /*text-overflow: ellipsis;*/
          overflow: hidden;
          width: 100%;
          text-align: left;
        }
        .grade {
          float: left;
          font-size: .8rem;
          line-height: 1.6rem;
          margin-left: 0.5rem;
        }
        .use-info {
          float: left;
          margin-left: 0.3rem;
          font-size: 0.8rem;
        }
      }
    }
  }
</style>